<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>flex基础-项目属性02</title>
		<style type="text/css">
			ul{
				display: flex;
				list-style: none;
			}
			li{
				width: 100px;
			}
			li:nth-of-type(1){
				background: yellow;
			}
			li:nth-of-type(2){
				background: yellowgreen;
				flex-grow: 1;
			}
			li:nth-of-type(3){
				background: pink;
			}
			li:nth-of-type(4){
				background: orange;
				flex-grow: 2;	
			}
			li:nth-of-type(5){
				background: greenyellow;
			}
			
		</style>
	</head>
	<body>
		<!--
			项目的顺序: 默认为0,数值越小,越靠前;数值越大,越靠后(可以是负数),只用在flex布局的item里
			项目的扩展: 默认为0,大于0时,开启扩展功能
					 多个item具有flex-grow的属性时,父元素的剩余宽度按比例分配
					 比如: 第4个li设置了flex-grow: 2;第2个li设置了flex-grow: 1;
					 	那么ul的剩余宽度平均分成3份,li(4)占2份,li(2)占一份
	-->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>
